<template>
	<view class="login">
		<image class="bg" src="../../static/image/login_bg.png" mode=""></image>
		<image class="logo" src="../../static/image/logo.png" mode=""></image>
		<view class="title">
			社会心理服务管理平台
		</view>
		<view class="inputPhoneView">
			<p>手机号</p>
			<u-input class="login_input" :type="number" :border="true" v-model="inputPhone" placeholder="请输入手机号"></u-input>
			<p>账号</p>
			<u-input class="login_input" :type="text" :border="true" v-model="inputAccount" placeholder="请输入账号"></u-input>
		</view>
		<view class="login_btn" @click="phoneAndAccountTologin">登录</view>

		<view class="popup-class" v-if="showPhone">
			<view class="get-phone">
				<image class="shutDownBtn" src="../../static/image/shutDownBtn.png" mode="scaleToFill" @click="clickOnShutDownBtnAction"></image>
				<image class="phoneLogo" src="../../static/image/getPhoneLogo.png" mode="scaleToFill"></image>
				<view class="p1">手机授权</view>
				<view class="p2">申请获取您绑定的手机号</view>
				<button class="phone-button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					去授权
				</button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		wxBindPhoneToInternet,
		wxLoginByToken,
		loginByPhoneAndAccount,
	} from '../../apis/api';

	/// 是否展示手机号
	const showPhone = ref(false)
	/// 用户token
	const token = ref("")
	/// 用户的openID
	const openId = ref("")
	/// 用户信息
	const user = ref({})
	/// 新登录使用
	/// 手机号
	const inputPhone = ref("13398174063")
	/// 账号
	const inputAccount = ref("GP0002")

	const phoneAndAccountTologin = async () => {
		try {
			const loginRes = await loginByPhoneAndAccount({
				phone: inputPhone.value,
				docCode: inputAccount.value
			});
			console.log("后台得到的登录信息" + loginRes)
			user.value = JSON.parse(JSON.stringify(loginRes.data.user))
			token.value = loginRes.data.token
			jumpToTabbarVc()
		} catch (error) {
			console.error("后台登录报错信息" + error.message)
			uni.showToast({
				title:error.message,
				icon:'error'
			})
		}
	}

	const login = () => {
		uni.showModal({
			title: '授权登录',
			content: '是否授权登录微信小程序？',
			success: (res) => {
				if (res.confirm) {
					uni.getUserProfile({
						desc: '登录后可同步数据',
						lang: 'zh_CN',
						success: (infoRes) => {
							console.log('用户信息-----------', infoRes)
							uni.login({
								provider: 'weixin',
								success: async (loginRes) => {
									console.log('获取code-----------', loginRes)							
									loginByCode(loginRes.code)
								},
								fail: function(err) {
									uni.showToast({
										title:err.message,
										icon:'error'
									})
								}
							});
						},
						fail: function(err) {}
					});
				} else if (res.cancel) {
					uni.showToast({
						title:"请先授权登录",
						icon: 'error'
					})
				}
			},
			
		})
	}

	const loginByCode = async (wxCode) => {
		// uni.switchTab({
		// 	url:"/pages/index/index"
		// })
		console.log("授权登录的ID:" + wxCode)
		try {
			const loginRes = await wxLoginByToken({
				code: wxCode
			});
			console.log("后台得到的登录信息" + loginRes)
			openId.value = loginRes.data.openId
			if (loginRes.data.isBindPhone) {
				user.value = JSON.parse(JSON.stringify(loginRes.data.user))
				token.value = loginRes.data.token
				jumpToTabbarVc()
			}else {
				showPhone.value = true
			}
			// showPhone.value = true
		} catch (error) {
			console.log("后台登录报错信息" + error.message)
			uni.showToast({
				title:error.message,
				icon:'error'
			})
		}
	}
	
	const clickOnShutDownBtnAction = () => {
		uni.showToast({
			title:"用户取消授权",
			icon:'error'
		})
		showPhone.value = false
	}

	const getPhoneNumber = async (e) => {
		showPhone.value = false
		console.log(e)
		console.log(e.detail.code)
		if (e.detail.code) {
			try {
				const res = await wxBindPhoneToInternet({
					openId: openId.value,
					jsCode: e.detail.code
				})
				console.log(res)
				user.value = JSON.parse(JSON.stringify(res.data.user))
				token.value = res.data.token
				jumpToTabbarVc()
			} catch (error) {
				console.log('测试结果' + error.message)
				uni.showToast({
					title:error.message,
					icon:'error'
				})
			}
		}else {
			uni.showToast({
				title:'用户拒绝授权',
				icon:'error'
			})
		}
	}
		
	const jumpToTabbarVc = async () => {
		uni.setStorageSync('userToken', token.value)
		uni.setStorageSync('userInfo', user.value)
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	
</script>

<style lang="scss" scoped>
	.login {
		width: 100vw;
		height: 100vh;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			display: block;
		}

		.logo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);

		}

		.title {
			color: #fff;
			border-radius: 50%;
			position: absolute;
			top: 43%;
			left: 50%;
			transform: translateX(-50%);
			width: 80%;
			font-size: 40rpx;
			
			text-align: center;
		}
		
		.inputPhoneView {
			background-color: #fff;
			border-radius: 10rpx;
			position: absolute;
			top: 50%;
			left: 5%;
			width: 95%;
			transform: translateX(-2.5%);
			
			padding: 16rpx;
			
				
			.login_input {
				margin-top: 16rpx;
				margin-bottom: 16rpx;
			}
			
			
		}

		.login_btn {
			width: 622rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			font-weight: 600;
			font-size: 28rpx;
			left: 50%;
			bottom: 6%;
			transform: translateX(-50%);
		}
		
		.popup-class {
			width: 100%;
			height: 680rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 0%;
			bottom: 0%;
			.get-phone {
				width: 100%;
				height: 100%;
				
				.shutDownBtn {
					width: 72rpx;
					height: 72rpx;
					display: flex;
					position: absolute;
					right: 48rpx;
					top: 36rpx;
				}
				
				.phoneLogo {
					width: 96rpx;
					height: 96rpx;
					display: flex;
					position: absolute;
					top: 156rpx;
					left: 327rpx;
				}
				
				.p1 {
					transform: translateX(-50%);
					color: #4E5969;
					font-size: 40rpx;
					// display: flex;
					position: absolute;
					left: 50%;
					top: 300rpx;
				}
				.p2 {
					transform: translateX(-50%);
					color: #4E5969;
					font-size: 32rpx;
					// display: flex;
					position: absolute;
					left: 50%;
					top: 380rpx;
				}
				.phone-button {
					width: 654rpx;
					height: 96rpx;
					background: #0fc6c2;
					border-radius: 96rpx 96rpx 96rpx 96rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					font-weight: 600;
					font-size: 32rpx;
					left: 50%;
					bottom: 10%;
					transform: translateX(-50%);
					color: #fff;
				}
			}
		}

	}
</style>